@extends('layouts.home.home_master')
@section('head')
<script src="{{ asset('home/js/jquery-1.7.2.min.js') }}" ></script>
<script src="{{ asset('home/js/html5.js') }}" ></script>
<script src="{{ asset('home/js/jflow.plus.js') }}" ></script>
<script src="{{ asset('home/js/jquery.carouFredSel-5.2.2-packed.js') }}"></script>
<script>
$(document).ready(function(){
    $("#myController").jFlow({
        controller: ".control", // must be class, use . sign
        slideWrapper : "#jFlowSlider", // must be id, use # sign
        slides: "#slider",  // the div where all your sliding divs are nested in
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        width: "984px",  // this is the width for the content-slider
        height: "480px",  // this is the height for the content-slider
        duration: 400,  // time in miliseconds to transition one slide
        prev: ".slidprev", // must be class, use . sign
        next: ".slidnext", // must be class, use . sign
        auto: true
    });
    // $('#list_product2').carouFredSel({
    //     prev: '#prev_c2',
    //     next: '#next_c2',
    //     auto: false
    // });
    $(window).resize();
    $("button").click(function(){
         $(this).addClass('click')
    });
});
</script>
@endsection

@section('content')

<section id="main" class="home">
<div class="container_12">
    <div id="sidebar" class="grid_3">
        <aside id="categories_nav">
            <h3>分类</h3>
            <nav class="left_menu">
                <ul>
                @foreach($categories as $cate)
                   <li><a href="{{ url('/categories/'.$cate['product_category_id']) }}">{{ $cate['name'] }} 
                   <span></span></a></li>
                @endforeach
                </ul> 
            </nav><!-- .left_menu -->
        </aside><!-- #categories_nav -->
    </div><!-- .sidebar -->
    <div id="content" class="grid_9">
            <h1 class="page_title"></h1>
          
            <div class="options">
             <div class="grid-list">
               <a class="grid curent" href="#"><span>img</span></a>
               <a class="list" href="#"><span>img</span></a>
             </div><!-- .grid-list -->
             <div class="sort">
                <a href="{{ url('categories/'. ($cate_id ? $cate_id .'/price' : '')) }}" style="text-decoration: none;">按价格排序</a>
                <a class="sort_up" href="#">&#8593;</a>
             </div><!-- .sort -->
             <div class="sort">
               <a href="{{ url('categories/'. ($cate_id ? $cate_id .'/date' : '')) }}" style="text-decoration: none;">按日期排序</a>
               <a class="sort_up" href="#">&#8593;</a>
             </div>
            </div><!-- .options -->
          
            <div class="grid_product">
             
                @foreach($limitedProducts as $product)
                <div class="grid_3 product">
                    <!-- <img class="sale" src="images/new.png" alt="New"/> -->
                    <div class="prev">
                      <a href="{{ url('/product/'.$product['product_id']) }}">
                        <img src="{{ asset('attachs/img/'.$product['photo']) }}" alt="" title="" />
                      </a>
                    </div><!-- .prev -->
                    <h3 class="title">
                      {{ $product['product_name'] }}
                    </h3>
                    <div class="cart">
                       <div class="price">
                          <div class="vert">
                            @if(empty(Auth::user()->email))
                            <div class="price_new">***</div>
                            <div class="price_old">***</div>
                            @else 
                            <div class="price_new">{{ $product['price'] }}</div>
                            <div class="price_old">{{ $product['price'] }}</div>
                            @endif
                          </div>
                       </div>
                       <a href="#" class="obn"></a>
                       <a href="#" class="like"></a>
                       <a href="#" class="bay"></a>
                    </div><!-- .cart -->
                </div><!-- .grid_3 -->
                @endforeach
        
                <div class="clear"></div>
            </div><!-- .grid_product -->
          
            <div class="clear"></div>
          
            <!-- <div class="pagination">
                <ul>
                    <li class="prev"><span>&#8592;</span></li>
                    <li class="curent"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><span>...</span></li>
                    <li><a href="#">100</a></li>
                    <li class="next"><a href="#">&#8594;</a></li>
                </ul>
            </div>
            <p class="pagination_info">Displaying 1 to 12 (of 100 products)</p>
            -->
       </div><!-- #content -->
       
    <div class="clear"></div>
    
</div><!-- .container_12 -->
</section>
<div class="clear"></div>
@endsection

